<template>
  <!-- 渲染设置倒数日的对话框组件 -->
  <app-dialog v-model="dialogVisible" width="350px">
    <!-- 定义对话框头部模板 -->
    <template #header>
      <!-- 显示对话框标题 -->
      <h2 class="dialog-header">设置倒数日</h2>
    </template>
    <!-- 表单容器 -->
    <div class="form-container">
      <!-- 表单组，用于输入倒数日标题 -->
      <div class="form-group">
        <!-- 输入框标签 -->
        <label for="countdownTitle">倒数日标题:</label>
        <!-- 绑定倒数日标题的输入框 -->
        <input v-model="countdownTitle" id="countdownTitle" placeholder="例如：距离生日还有" class="input-field" />
      </div>
      <!-- 表单组，用于选择未来日期 -->
      <div class="form-group">
        <!-- 输入框标签 -->
        <label for="countdownDate">选择未来日期:</label>
        <!-- 绑定日期选择的输入框，最小日期由 getMinDate 方法确定 -->
        <input type="date" v-model="countdownDate" id="countdownDate" :min="getMinDate()" class="input-field" />
      </div>
    </div>
    <!-- 定义对话框底部模板 -->
    <template #footer>
      <!-- 按钮容器 -->
      <div class="button-container">
        <!-- 点击取消按钮，关闭对话框 -->
        <button @click="dialogVisible = false" class="cancel-button">取消</button>
        <!-- 点击还原默认设定按钮，清除倒数日设置并关闭对话框 -->
        <button @click="clearSettings" class="confirm-button">还原默认设定</button>
        <!-- 点击确定按钮，确认倒数日设置并关闭对话框 -->
        <button @click="confirmCountdown" class="confirm-button">确定</button>
      </div>
    </template>
  </app-dialog>
</template>

<script lang="ts" setup>
// 从 vue 导入 ref 和 computed
import { ref, computed, type ComputedRef } from 'vue';
// 导入 app-dialog 组件
import AppDialog from './app-dialog.vue';
// 从 countdownDayStore 导入 useCountdownDayStore
import { useCountdownDayStore } from '../stores/countdownDayStore.ts';
// 创建 countdownDayStore 实例
const store = useCountdownDayStore();

/**
 * 定义 props 接收 modelValue，用于控制对话框的显示与隐藏
 */
const props = defineProps<{
  modelValue: boolean;
}>();
/**
 * 定义 emits 用于触发 update:modelValue 事件，实现双向绑定
 */
const emits = defineEmits(['update:modelValue']);

/**
 * 使用 computed 实现对话框显示状态的双向绑定
 */
const dialogVisible: ComputedRef<boolean> = computed({

  /**
   * 获取对话框显示状态
   * @returns {boolean} 对话框显示状态
   */
  get(): boolean {
    return props.modelValue;
  },
  /**
   * 设置对话框显示状态，并触发 update:modelValue 事件
   * @param {boolean} value - 对话框显示状态
   */
  set(value: boolean) {
    emits('update:modelValue', value);
  }
});

/**
 * 关闭对话框
 */
 const closeDialog = (): void => {
  emits('update:modelValue', false);
};

/**
 * 定义倒数日标题的响应式变量
 */
const countdownTitle = ref<string>('');
/**
 * 定义倒数日日期的响应式变量
 */
const countdownDate = ref<string>('');

/**
 * 获取日期选择器的最小日期，即当前日期
 * @returns {string} 当前日期的 ISO 字符串，截取前 16 位
 */
const getMinDate = (): string => {
  const date = new Date();
  return date.toISOString().slice(0, 16);
};

/**
 * 清除倒数日设置，并关闭对话框
 */
const clearSettings = () => {
  // 调用 store 的 clearCountdownDay 方法清除倒数日设置
  store.clearCountdownDay();
  // 关闭对话框
  closeDialog();
};

/**
 * 确认倒数日设置
 */
const confirmCountdown = (): void => {
  // 去除倒数日标题的前后空格
  const title = countdownTitle.value.trim();
  // 创建选择日期的 Date 对象
  const date = new Date(countdownDate.value);
  // 创建当前日期的 Date 对象
  const now = new Date();

  // 检查是否输入了倒数日标题
  if (!title) {
    alert('请输入倒数日标题');
    return;
  }

  // 检查是否选择了日期
  if (!countdownDate.value) {
    alert('请选择未来日期');
    return;
  }

  // 检查选择的日期是否为未来日期
  if (date <= now) {
    alert('请选择一个未来的日期');
    return;
  }

  // 调用 store 的 setCountdownDay 方法设置倒数日
  store.setCountdownDay(title, new Date(countdownDate.value));
  // 关闭对话框
  closeDialog();
};
</script>

<style lang="scss" scoped>
// 对话框头部样式
.dialog-header {
  color: #333;
  font-size: 24px;
  margin: 0;
  padding: 16px;
  border-bottom: 1px solid #e0e0e0;
}

// 表单容器样式
.form-container {
  padding: 16px;

  // 表单组样式
  .form-group {
    margin-bottom: 16px;

    // 标签样式
    label {
      display: block;
      margin-bottom: 8px;
      color: #666;
      font-size: 14px;
    }

    // 输入框样式
    .input-field {
      width: 100%;
      padding: 8px;
      border: 1px solid #d9d9d9;
      border-radius: 4px;
      font-size: 14px;
      box-sizing: border-box;

      // 输入框聚焦样式
      &:focus {
        outline: none;
        border-color: #40a9ff;
        box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
      }
    }
  }
}

// 按钮容器样式
.button-container {
  display: flex;
  justify-content: flex-end;
  padding: 16px;
  border-top: 1px solid #e0e0e0;

  // 按钮间隔样式
  button+button {
    margin-left: 8px;
  }

  // 确认按钮和取消按钮公共样式
  .confirm-button,
  .cancel-button {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: opacity 0.2s;
  }

  // 确认按钮样式
  .confirm-button {
    background-color: #1890ff;
    color: white;
    margin-left: 8px;
  }

  // 取消按钮样式
  .cancel-button {
    background-color: #f5f5f5;
    color: #333;
  }

  // 按钮悬停样式
  .confirm-button:hover,
  .cancel-button:hover {
    opacity: 0.9;
  }
}
</style>